<template>
	<view class="page">
		<topVue title="收货地址管理" name="plus" @handle="$tools.route('./addAddress')"></topVue>
		<view class="item padding30 margin20 relative" v-for="(item, index) in list" :key="index" @click="select(item)">
			<image src="../../static/person/icon.png" style="width: 58rpx; height: 58rpx; left: 0; top: 0;" class="absolute" v-if="item.defaultStatus"></image>
			<view class="flex-between align-center">
				<viiew class="flex align-center">
					<view class="name">{{item.name}}</view>
					<view class="phone">{{item.mobile | conceal()}}</view>
				</viiew>
				<view class="flex align-center">
					<image src="../../static/edit.png" style="width: 38rpx; height: 38rpx;" @click.stop="toEdit(item)"></image>
					<image src="../../static/delete.png" style="width: 38rpx; height: 38rpx; margin-left: 20rpx;" @click.stop="isDelete=true; deleteId=item.id"></image>
				</view>
			</view>
			<view class="content">{{item.areaName}}{{item.detailAddress}}</view>
		</view>
		
		<empty text="地址列表为空" v-if="isEmpty"></empty>
		
		<popup :show="isDelete" text="确认删除该地址?" @cancel="isDelete=false" @confirm="deleteFun"></popup>
	
		<Loading :num="2" v-if="loading"></Loading>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isDelete: false,
				deleteId: "",
				list: [],
				isEmpty: false,
				loading: false,
				pageWay: ""
			}
		},
		
		onLoad(option) {
			this.pageWay = option.value
		},
		
		async onShow() {
			await this.getList()
		},
		
		methods: {
			// 删除地址
			async deleteFun(){
				this.loading = true
				const result = await this.$request("/app-api/member/address/delete", "DELETE", {
					id: this.deleteId
				}, "application/x-www-form-urlencoded")
				this.loading = false
				if(result.code===0) {
					this.isDelete = false
					this.$u.toast("删除成功")
					await this.getList()
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			// 地址列表
			async getList(){
				this.loading = true
				const result = await this.$request("/app-api/member/address/list", "GET", {})
				if(result.code===0) {
					this.loading = false
					this.list = result.data
					this.isEmpty = result.data.length===0
					console.log("地址列表", this.list)
				}else{
					this.loading = false
				}
			},
			
			toEdit(item){
				uni.navigateTo({
					url: './editAddress?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			
			// 选择地址
			select(item){
				console.log(this.pageWay)
				if(this.pageWay=="undefined") return
				this.$tools.prePage().defultAddress = item
				this.$tools.back()
			},
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.phone {
			color: #4B5563;
			line-height: 1;
			padding-left: 30rpx;
		}
		.content {
			color: #4B5563;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
	}
</style>